<script setup>
import { ref,reactive,computed,watch,watchEffect ,onMounted} from "vue";
import {reg,getUserInfo} from "@/api/user"
import {useStore} from "@/pinia/index"
import {useRouter} from "vue-router"
import { UserOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';

const router=useRouter()
const store=useStore()
const username=ref("")
const password=ref("")
const checked = ref(false);
function userReg(){
	if(!username.value&&!password.value){
		return
	}
	reg(username.value,password.value).then(res=>{
		console.log("res:",res);
		if(res.code!==0){
			console.log("错误res:",res);
		}else{
			const token=res.data
			store.login(token)
			console.log("token:",token);
			GetUserInfo()
		}
	})
}
function GetUserInfo(){
	getUserInfo().then(info=>{
		console.log("info:",info);
		if(info.code===0){
			const data=info.data
			const userInfo={
				id:data.id,
				username:data.username
			}
			store.setUserInfo(userInfo)
			router.replace("/")
		}
		else{
			console.log("err:",info);
		}
		
	})
}
</script>


<template>
	<div class="login">
		<h1>聊天注册</h1>
		<a-input v-model:value="username" placeholder="账号"/>
		<a-input v-model:value="password"  placeholder="密码" />
		<a-button type="primary" @click="userReg">注册</a-button>
	</div>

</template>


<style scoped>
.login{
	margin: 0 auto;
	padding: 10px;
	max-width: 20rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login>*{
	margin:10px 0;
}
</style>